<template>
  <div class="uploadImage">
    <!-- 通过的上传图片组件包括图片裁剪 -->
    <el-upload
      class="avatar-uploader"
      :http-request="uploadImg"
      action="#"
      :before-upload="fileSizeLimit"
      :on-remove="removeImg"
      :show-file-list="false"
    >
      <!-- 自定义上传样式 -->
      <div v-if="customStyle">
        <slot></slot>
      </div>
      <!-- 默认的样式 -->
      <el-image
        v-if="imgUrl && !customStyle && imgUrl !== ''"
        fit="contain"
        :src="imgUrl"
        class="avatar"
      > </el-image>
      <i
        v-if="!customStyle && (imgUrl == '' || !imgUrl)"
        class="el-icon-plus avatar-uploader-icon"
      ></i>
      <div
        v-if="!customStyle && (imgUrl == '' || !imgUrl)"
        slot="tip"
        class="el-upload__tip"
      >{{ tip }}</div>
    </el-upload>
    <imageCropper
      :show.sync="cropperVisible"
      :file="file"
      @confirm="onConfirm"
    />
  </div>
</template>

<script type="text/javascript">
import { uploadImageBefore, uploadVideoBefore } from '@/utils/index'
import imageCropper from './imageCorpper.vue'
export default {
  components: {
    imageCropper
  },

  props: ['tip', 'type', 'url', 'customStyle'],
  data() {
    return {
      imgUrl: '',
      cropperVisible: false,
      file: {
        url: '',
        name: ''
      },
      autoCropWidth: '400px',
      autoCropHeight: '400px'
    }
  },
  watch: {
    url(newVal, oldVal) {
      console.log(newVal, 'newVal')
      this.imgUrl = newVal
    }
  },
  mounted() {
    if (this.url && this.url != '') {
      this.imgUrl = this.url
    }
  },
  methods: {
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    // 不需要裁剪图片
    async uploadImg(params) {
      const result = await this.uploading(params.file)
      console.log(result, 'result')
      this.imgUrl = result.host + '/' + result.finallName
      this.$emit('resultUpload', this.imgUrl, this.type)
    },
    // 需要裁剪图片
    // async uploadImg(params) {
    //   if (params.file) {
    //     this.file.url = await this.getBase64(params.file)
    //     this.file.name = params.file.name
    //     this.cropperVisible = true
    //   }
    // },
    // 上传之前
    fileSizeLimit(file) {
      return uploadImageBefore(file, this)
    },
    // 删除前
    removeImg() { },
    // 裁剪完成后返回图片地址
    async onConfirm(file) {
      const uploadConfig = {
        dir: '/zhangsheng/service/avatars/'
      }
      this.cropperVisible = false
      const result = await this.uploading(file, uploadConfig)
      console.log(result, 'result')
      this.imgUrl = result.host + '/' + result.finallName
      this.$emit('resultUpload', this.imgUrl, this.type)
    }
    // 上传
  }
}
</script>
<style lang="scss" scoped>
.uploadImage {
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  ::v-deep .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  ::v-deep .el-upload__tip {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}
</style>
